<template>
	<!-- 收货地址列表 -->
	<view class="u-address">
		<u-swipe-action>
			<!-- 默认收货地址 -->
			<view class="defaultAddress" v-if="Object.keys(defaultAddress).length">
				<u-swipe-action-item :options="btnOptions" @click="onDelete" :name="defaultAddress.id">
					<!-- 地址卡片 -->
					<view class="addressCard" :class="{selected: canSelect&&defaultAddress.id===selectedId}"
						@click="canSelect?getSelectedId(defaultAddress.id):toEditAddress(defaultAddress.id)">
						<!-- 左侧收货信息 -->
						<view class="addressCard-info">
							<!-- 用户名与电话 -->
							<view class="addressCard-info__user">
								<view class="user-text">
									<text class="user-name">{{defaultAddress.name}}</text>
									<text class="user-phone">{{defaultAddress.phone}}</text>
								</view>
								<u-tag text="默认" shape="circle" bgColor="#ee0a24" borderColor="#ee0a24" size size="mini"
									r="#fff"></u-tag>
							</view>
							<!-- 地址 -->
							<view class="addressCard-info__addr">
								<text class="addr-text">{{defaultAddress.area_name}}</text>
								<!-- 详细地址 -->
								<text class="addr-desc">{{defaultAddress.desc}}</text>
							</view>
						</view>
						<!-- 右侧修改icon -->
						<view class="addressCard-icon" @click.stop="toEditAddress(defaultAddress.id)"><i
								class="iconfont icon-bianji"></i></view>
					</view>
				</u-swipe-action-item>
				<!-- </u-swipe-action> -->
			</view>

			<!-- 收货地址列表 -->
			<view class="defaultAddress">
				<!-- <u-swipe-action> -->
				<u-swipe-action-item :options="btnOptions" v-for="addr in userAddressList" :key="addr.id"
					@click="onDelete" :name="addr.id">
					<!-- 地址卡片 -->
					<view class="addressCard" :class="{selected: canSelect&&addr.id===selectedId}"
						@click="canSelect?getSelectedId(addr.id):toEditAddress(addr.id)">
						<!-- 左侧收货信息 -->
						<view class="addressCard-info">
							<!-- 用户名与电话 -->
							<view class="addressCard-info__user">
								<view class="user-text">
									<text class="user-name">{{addr.name}}</text>
									<text class="user-phone">{{addr.phone}}</text>
								</view>
							</view>
							<!-- 地址 -->
							<view class="addressCard-info__addr">
								<text class="addr-text">{{addr.area_name}}</text>
								<!-- 详细地址 -->
								<text class="addr-desc">{{addr.desc}}</text>
							</view>
						</view>
						<!-- 右侧修改icon -->
						<view class="addressCard-icon" @click.stop="toEditAddress(addr.id)"><i
								class="iconfont icon-bianji"></i></view>
					</view>
				</u-swipe-action-item>
			</view>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		options: {
			// 允许样式穿透
			styleIsolation: 'shared'
		},
		name: "u-address",
		props: {
			// 是否启用选择功能
			canSelect: {
				type: Boolean,
				default: false,
			},
			// 用户收货地址列表(除去默认地址)
			userAddressList: {
				type: Array,
				default: () => [],
			},
			// 默认收货地址
			defaultAddress: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {
				// 隐藏按钮配置
				btnOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#f00'
					}
				}],
				// 当前选中的id
				selectedId: null,
			};
		},
		methods: {
			// 触发删除按钮
			onDelete(value) {
				// console.log(value.name);
				// 通知父组件，删除按钮被触发
				this.$emit('delete', value.name)
			},
			// 获取选择地址的id
			getSelectedId(id) {
				this.selectedId = id;
				// 通知父组件选中地址发生变化
				this.$emit('select', id);
			},
			// 携带地址id跳转到地址编辑页
			toEditAddress(id) {
				this.$Router.push({
					path: '/update_address',
					query: {
						id
					}
				});
			},
		},
		watch: {
			// 监听默认地址
			defaultAddress() {
				// 默认选中默认地址
				this.selectedId = this.defaultAddress.id;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-address {
		padding-top: 1.4vw;

		// 地址卡片
		.addressCard {
			background-color: #fff;
			padding: 30rpx;
			padding-right: 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:active {
				background-color: #f2f3f5;
			}

			&.selected {
				background-color: rgba(#3c9cff, 0.2);
			}
		}

		// 左侧收货信息
		.addressCard-info {
			flex-shrink: 0;
			max-width: 560rpx;

			// 用户名与电话
			.addressCard-info__user {
				display: flex;
				align-items: center;

				.user-text {
					@include textOverflow();

					.user-name,
					.user-phone {
						color: #555;
						font-size: 32rpx;
						font-weight: 700;
						margin-right: 48rpx;

						&.user-phone {
							margin-right: 24rpx;
						}
					}
				}
			}

			// 地址
			.addressCard-info__addr {
				@include textOverflow();
				margin-top: 20rpx;

				.addr-text,
				.addr-desc {
					color: #555;
					font-size: 28rpx;

					&.addr-text {
						margin-right: 28rpx;
					}
				}
			}
		}

		// 右侧修改icon
		.addressCard-icon {
			// 这里的宽度和上面 左侧收货信息的 最大宽度 + 盒子padding要等于750rpx
			width: 160rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				font-size: 48rpx;
			}
		}
	}

	// 滑动单元格样式
	::v-deep .u-swipe-action-item {
		margin-bottom: 1.4vw;
	}
</style>